<template>
  <div class="edit-dialog">
    <el-dialog
      v-model="dialog"
      title="二维码"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :show-close="true"
      width="400px"
      center
      @close="handleClose"
    >
      <div class="content">
        <el-form label-width="70px" label-position="right" class="el-form" :model="detailFormData">
          <el-row>
            <el-col style="text-align: center">
              <img v-if="qrCodeUrl != ''" :src="qrCodeUrl" style="width: 260px; height: 260px;" />
            </el-col>
          </el-row>
          <el-row>
            <el-col style="text-align: center;margin-top: 10px;">
              {{detailFormData.type}} - {{detailFormData.deviceId}}
            </el-col>
          </el-row>
          <!--<el-row>
            <el-col style="text-align: center;margin-top: 10px;">
              <el-button icon="el-icon-download" circle></el-button>
            </el-col>
          </el-row>-->
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "@/api/inventoryManage";
import { getImg } from "@/api/common";

export default {
  name: "detail",
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    deviceId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      detailFormData: {},
      projectOptions: [],
      imgKeys: [],
      qrCodeUrl: "",
      projectName: ""
    };
  },
  watch: {
    dialog(newVal) {
      if (!newVal) {
        this.detailFormData = {};
        this.qrCodeUrl = "";
        this.imgKeys = [];
        this.projectOptions = [];
      } else {
        if (newVal != "") {
          this.getDetail();
        }
      }
    }
  },
  computed: {
    dialog: {
      get() {
        return this.showDialog;
      },
      set() {}
    }
  },
  mounted() {},
  methods: {
    getImgFun(val) {
      let data = {
        key: val
      };
      getImg(data).then(res => {
        for (let i = 0; i < this.imgKeys.length; i++) {
          if (this.imgKeys[i].imgkey == val) {
            this.imgKeys[i].httpUrl = res.value;
          }
        }
      });
    },
    getDetail() {
      const that = this;
      let data = {
        deviceId: this.deviceId
      };
      get(data).then(res => {
        if (res["code"] == 200) {
          that.detailFormData = res.value;
          for (let i = 0; i < this.detailFormData.imageKeys.length; i++) {
            const element = this.detailFormData.imageKeys[i];
            this.imgKeys.push({ imgkey: element, httpUrl: "" });
            this.getImgFun(element);
          }
          if (res.value.project != null) {
            that.projectName = res.value.project.name;
          }
          if (res.value.qrCodeKey != null) {
            let data = {
              key: res.value.qrCodeKey
            };
            getImg(data).then(res => {
              if (res["code"] == 200) {
                that.qrCodeUrl = res.value;
              }
            });
          }
        }
      });
    },
    // 取消事件
    handleClose() {
      this.$emit("changeVisible", false);
    }
  }
};
</script>

<style>
/* 设置滚动条的样式 */
.edit-dialog ::-webkit-scrollbar {
  width: 8px;
}
/* 滚动槽 */
.edit-dialog ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
.edit-dialog ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
.edit-dialog ::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(104, 102, 102, 0.4);
}
.edit-dialog .el-carousel__indicators--horizontal {
  display: none;
}
</style>
<style scoped>
.el-form-item {
  margin-bottom: 10px;
}
.img-box {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.img-item {
  height: 100%;
  border: solid 1px #ccc;
  margin-right: 3px;
  object-fit: contain;
}
.banner-img {
  width: 100%;
  height: 90px;
  border: solid 1px #ccc;
  object-fit: contain;
}
</style>
<style lang="scss" scoped>
.desc {
  max-height: 80px;
  overflow-y: auto;
  line-height: 36px;
}
</style>
